<template>
  <div class="personal">
    <div class="head">
      <div class="img">
        <img :src="userData.profile_img" alt="" id="preview">
      </div>
      <form enctype="multipart/form-data" action="http://192.168.3.4:3001/modifyProfileImg" method="post">
        <div class="upload">
          <input name="username" :value="userData.username" type="text" hidden>
          <input name="imgUrl" id="file" type="file" class="form-control" @change="showImg">
        </div>
        <div class="action">
          <button @click="actionImg" type="submit">上传头像</button>
        </div>
      </form>
    </div>
    <div @click="showForm">
      <ProfileItem style="background-color: white" >
        <i class="fa fa-cog" slot="img"></i>
        <span slot="text" >修改密码</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
    </div>
    <form class="form-message" :class="{display: isShow}">
      <div class="title">
        <div class="title-text">原密码</div>
        <div class="title-input">
          <input v-model="oldPassword" id="title1" name="title" type="password" placeholder="请输入原密码">
        </div>
      </div>
      <div class="title">
        <div class="title-text">新密码</div>
        <div class="title-input">
          <input v-model="newPassword" id="title2" name="title" type="password" placeholder="请输入新密码">
        </div>
      </div>
      <div class="btn">
       <button type="button" @click="actionPwd">提交</button>
      </div>
    </form>
    <div class="footer" @click="logout">
      <ProfileItem style="background-color: white">
        <i class="fa fa-times" slot="img"></i>
        <span slot="text">退出登录</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
    </div>
  </div>
</template>

<script>
import ProfileItem from "./ProfileItem";
import qs from "qs";
export default {
  name: "PersonalCenter",
  components: {
    ProfileItem
  },
  data(){
    return{
      isShow: true,
      userData: '',
      oldPassword: '',
      newPassword: '',
      imgMessage: ''
    }
  },
  methods: {
    showForm(){
      if (this.isShow){
        this.isShow = false;
      }else {
        this.isShow = true;
      }
    },
    //退出登录
    logout(){
      let flag = confirm('你确定要退出登录吗？');
      if (flag){
        sessionStorage.removeItem('username');
        this.$router.go(-1);
      }
    },
    showImg(e){
      let fileDom = document.getElementById("file");
      let previewDom = document.getElementById("preview");
      let file = fileDom.files[0];
      // 使用FileReader来加载图像并显示图像的预览
      let fileReader = new FileReader();
      fileReader.onload = e=>{
        previewDom.src = e.target.result; //修改src
      };
      fileReader.readAsDataURL(file);        //显示预览
      this.imgMessage = e.target.files;
      console.log(e.target.files);
    },
    //根据用户名获取用户信息
    findUser(){
      this.axios.get(`${process.env.VUE_APP_URL}/findUser`,{
        params: {
          username: sessionStorage.getItem('username')
        }
      }).then((res)=>{
        this.userData = res.data[0];
        //console.log(res.data[0]);
      })
    },
    //修改密码
    actionPwd(){
      let data = qs.stringify({
        username: sessionStorage.getItem('username'),
        oldPassword: this.oldPassword,
        newPassword: this.newPassword
      });
      //修改之前判断密码
      if (!this.oldPassword){
        alert('原密码不能为空！！！');
      }else if (!this.newPassword){
        alert('新密码不能为空！！！');
      }else if (this.oldPassword !== this.userData.password){
        alert('原密码这真实密码不一致！！！');
      }else{
          let flag = confirm('你确定要次改密码吗？');
          if (flag){
            this.axios({
              url: `${process.env.VUE_APP_URL}/modifyPassword`,
              method: 'post',
              data: data
            }).then((res)=>{
              console.log(res.data);
              if (res.data.flag){
                //修改成功，重新登录
                alert(res.data.message);
                //清除session
                sessionStorage.removeItem('username');
                //跳转登录页面
                this.$router.push('/login');
              }else {
                alert('修改失败！！！');
                this.$router.go(0);
              }
            })
          }
      }
    },
    //修改用户头像
    actionImg(e){
      let file = document.querySelector('#file').value;
      let data = qs.stringify({
        imgData: this.imgMessage
      })
      if (!file){
        alert('请先上传头像！！！');
        e.preventDefault();
      }else{
        return true;
      }
    }
  },
  created() {
    this.findUser();
  }
}
</script>

<style scoped>
  .display{
      display: none;
  }
  .head{
    width: 100%;
    height: 7.5rem;
    background-color: skyblue;
  }
  .img{
    display: inline-block;
    width: 35%;
    height: 3.5rem;
    margin-top: 0.5rem;
    margin-left: 32.5%;
    background-color: green;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .upload{
    width: 100%;
    height: 1.5rem;
  }
  .upload input{
    width: 60%;
    height: 1rem;
    margin-left: 20%;
    line-height: 1rem;
    text-align: center;
    border: 1px red solid;
  }
  .action{
    width: 100%;
    height: 1rem;
  }
  .action button{
    display: block;
    width: 25%;
    height: 1rem;
    font-size: 0.4rem;
    margin-left: 37.5%;
  }
  .form-message{
    height: 6rem;
    border-bottom: 3px white solid;
  }
  .title{
    width: 100%;
    height: 2rem;
    border-bottom: 3px white solid;
  }
  .title div{
    display: inline-block;
    float: left;
  }
  .title-text{
    width: 30%;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.5rem;
    text-align: center;
  }
  .title-input{
    width: 70%;
    height: 2rem;
  }
  .title-input input{
    display: block;
    width: 93%;
    height: 1.2rem;
    font-size: 0.45rem;
    line-height: 1.2rem;
    text-indent: 0.2rem;
    margin-top: 0.4rem;
    border: none;
    outline: none;
  }
  .btn{
    width: 100%;
    height: 1rem;
    margin-top: 10px;
  }
  .btn button{
    display: block;
    width: 30%;
    height: 1rem;
    margin: 0 auto;
    font-size: 0.5rem;
    font-size: 0.5rem;
  }
  .footer{
    display: inline-block;
    width: 100%;
    height: 8rem;
  }
</style>